<template>
  <div class="filter">
    <t-drawer
      size="842px"
      :footer="false"
      :visible.sync="visible"
      :close-on-overlay-click="false"
    >
      <template #header>
        <div class="drawer-head" @click="close">
          <p class="chevron-left">
            <icon-font name="chevron-left" size="18px"/>
          </p>
          <h3>{{ header }}</h3>
        </div>
      </template>

      <template #footer>
        <div class="footer-btn">
          <t-space size="24px">
            <t-button :theme="confirmBtn.theme" :loading="confirmBtn.loading" class="confirm-btn">
              {{ confirmBtn.content }}
            </t-button>
            <!--<t-button theme="default" class="cancel-btn" @click="close">取消</t-button>-->
          </t-space>
        </div>
      </template>

      <div class="filter ">
        <t-space size="12px">
          <t-select style="width: 160px;" v-model="params.status" :options="statusOptions" clearable @change="getData" placeholder="按序列号状态">
            <template #label>
              <icon-font name="layers" style="color: #000;"/>
            </template>
          </t-select>
          <t-input style="width: 220px;" v-model="params.key" clearable @change="getData" placeholder="sn/名称/标签">
            <template #label>
              <icon-font name="search" size="16px" style="color:#000;font-weight: bold"/>
            </template>
          </t-input>
        </t-space>
      </div>

      <div class="mt16">
        <t-table
          rowKey="id"
          :data="lists"
          :columns="columns"
          :stripe="stripe"
          :bordered="bordered"
          :hover="hover"
          :size="size"
          :max-height="maxHeight"
          :table-layout="tableLayout ? 'auto' : 'fixed'"
          :showHeader="showHeader"
          cellEmptyContent="-"
          resizable
          :loading="loading"
          @page-change="pageChange"
        >
          <template #title-slot-option></template>
          <template #thumb="{row}">
            <t-image-viewer :images="[row.thumb]" :closeOnEscKeydown="false">
              <template #trigger="{ open }">
                <div class="tdesign-demo-image-viewer__ui-image" @click="open">
                  <p class="prod-img">
                    <!--<img alt="" :src="row.thumb"/>-->
                    <img alt="图片" src="@/assets/product.png" />
                  </p>
                  <div class="tdesign-demo-image-viewer__ui-image--hover">
                    <span><browse-icon size="1.4em"/> 预览</span>
                  </div>
                </div>
              </template>
            </t-image-viewer>
          </template>
          <template #status="{row}">
            <!--状态（-1 作废；0 不在库；1 在库）-->
            <t-tag v-if="row.status === 1" theme="success" shape="round" variant="light">在库</t-tag>
            <t-tag v-if="row.status === 0" theme="warning" shape="round" variant="light">不在库</t-tag>
            <t-tag v-if="row.status === -1" theme="danger" shape="round" variant="light">作废</t-tag>
          </template>
          <template #option="{row}">
            <t-space size="12px">
              <t-link theme="warning" class="edit-btn-color" hover="color" @click="handleEdit(row)">编辑</t-link>
              <t-popconfirm theme="danger" placement="top-right" confirm-btn="删除" @confirm="handleDelete($event, row)">
                <template #content>
                  <div>
                    <h3 class="popconfirm-title">确认删除？</h3>
                    <!--<p>删除后数据将进入回收站！是否确认删除？</p>-->
                    <p>删除后数据将不可恢复！是否确认删除？</p>
                  </div>
                </template>
                <t-link theme="danger" variant="outline" hover="color">删除</t-link>
              </t-popconfirm>
            </t-space>
          </template>
        </t-table>
      </div>

      <div class="add-btn-wrap">
        <t-button theme="default" variant="outline" @click="handleAdd">
          <p class="flex align-center">
            <icon-font name="add-circle" class="mr8" />
            新增一条
          </p>
        </t-button>
      </div>
    </t-drawer>

    <serial-add ref="add" @refresh="getData"></serial-add>
  </div>
</template>

<script>
import UploadImg from "@/components/upload-img/index.vue";
import { IconFont } from "tdesign-icons-vue";
import {product_snDeleteApi, product_snListApi} from "@/api/serial-number";
import SerialAdd from "@/pages/warehouse/serial-number/components/serial-add.vue";

export default {
  name: 'SerialList',
  components: {SerialAdd, UploadImg, IconFont},
  data() {
    return {
      visible: false,
      header: '配件列表',
      confirmBtn: {
        theme: 'primary',
        content: '保存',
        loading: false
      },
      params: {
        page: 1,
        limit: 9999,
        p_sn_id: '', // 父snID 可选 示例值: 0
        group_id: '', // 分组ID 可选
        warehouse_id: '', // 仓库ID 可选
        product_id: '', // 产品ID 可选
        key: '', // 可选 搜索：sn/名称/标签
        is_del: '', // 可选 删除（1回收站；0正常）
        status: '', // 可选 状态（-1作废；0不在库；1在库）
      },
      lists: [],
      size: 'medium',
      tableLayout: false,
      stripe: false,
      bordered: false,
      hover: true,
      showHeader: true,
      columns: [
        {colKey: 'index', title: '序号', width: 66},
        {colKey: 'product_ean', title: 'EAN条形码', width: 120},
        {colKey: 'product_title', title: '产品名称', width: 180, ellipsis: true},
        {colKey: 'sn', title: '序列号', width: 220},
        {colKey: 'unit_title', title: '单位', width: 80},
        //{colKey: 'warehouse_name', title: '所在仓库', width: 140},
        //{colKey: 'status', title: '状态', width: 140},
        {colKey: 'option', title: 'title-slot-option', fixed: 'right', width: 140},
      ],
      selectedRowKeys: [],

      maxHeight: 472,
      loading: false,

      statusOptions: [
        {label: '在库', value: 1},
        {label: '不在库', value: 0},
        {label: '作废', value: -1},
      ],
    }
  },
  methods: {
    handleAdd() {
      this.$refs.add.open(this.params.p_sn_id)
    },
    handleEdit(row) {
      this.$refs.add.open(this.params.p_sn_id, row)
    },
    handleDelete(event, row) {
      product_snDeleteApi(row).then(res => {
        this.$message.success('删除成功')
        this.getData()
      }).catch(err => {
      })
    },
    // 获取数据
    getData() {
      //this.pagination.defaultCurrent = 1
      this.getList()
    },
    // 获取列表
    getList() {
      this.loading = true
      //this.params.page = this.pagination.defaultCurrent
      product_snListApi(this.params).then(res => {
        //this.pagination.total = res.count
        this.lists = res.data.map((item, index) => {
          item.index = index + 1
          return item
        })
      }).catch(err => {
      }).finally(() => {
        this.loading = false
      })
    },
    // 切换分页
    pageChange(pageInfo) {
      //const {current, defaultCurrent, defaultPageSize,} = pageInfo
      //this.pagination.defaultCurrent = current
      this.getList()
    },
    open(row={}) {
      this.row = row
      this.params.p_sn_id = row.id
      this.visible = true
      this.getData()
    },
    close() {
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>

.add-btn-wrap {
  padding-top: 24px;
  border-top: 1px solid #E1E1E1;
}

.add-btn {
  width: 140px;
  height: 42px;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  border-radius: var(--td-radius-medium);
}

/deep/ .t-dialog__body {
  padding-top: 0;
  margin-top: var(--td-comp-paddingTB-l);
}

/deep/ .t-dialog__footer {
  height: 75px;
}

.footer-btn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  width: 100%;
  padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xxl);
  background-color: #F9F9F9;
  border-bottom: 1px solid #F9F9F9;

  .confirm-btn {
    width: 132px;
    height: 42px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    line-height: 22.4px;
    border-radius: var(--td-radius-medium);
  }

  .cancel-btn {
    width: 132px;
    height: 42px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    line-height: 22.4px;
    background-color: #B8B8B8;
  }
}
</style>
